@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    >header {
        width: 100%;
        height: r(92);
        position: absolute;
        top: 0;
        background: #f7f7f7;
        margin: 0 auto;
        border-bottom: r(1) solid #c1c1c1;
        padding: 0 r(20);
        .img{
            float: left;
            margin-top: r(25);
            width: r(22);
            height: r(37);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .nav {
            width: 100%;
            height: r(92);
            line-height: r(92);
            margin: 0 auto;
            ul {
                padding-left: r(100);
                li {
                    display: inline-block;
                    width: r(100);
                    height: r(92);
                    text-align: center;
                    margin-right: r(40);
                    a {
                        letter-spacing: r(3);
                        font-size: r(35);
                        color: #333333;
                    }
                }
                li.active {
                    border-bottom: r(4) solid #cc3333;
                    a {
                        color: #cc3333;
                    }
                }
                li:nth-child(3) {
                    border-right: 0;
                }
            }
        }
        .letter {
            float: right;
            line-height: r(92);
            p {
                font-size: r(30);
                color: #666666;
            }
        }
    }
    >section {
        width: 100%;
        position: absolute;
        top: r(92);
        bottom: r(0);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        >.top{
            width: 100%;
            height: r(91);
            background: #f7f7f7;
            border-bottom: 1px solid #e0e0e0;
            ul li{
                width: 25%;
                height: r(90);
                text-align: center;
                a{
                    height: r(90);
                    color: #999999;
                    p{
                        font-size: r(24);
                    }
                    p:first-child{
                        padding-top: r(15);
                    }
                }
            }
            li.active{
                a{
                    color: #cc3333;
                }
            }
        }
        .hr{
            width: 100%;
            height: r(20);
            background: #f3f4f6;
        }
        .content{
            width: 100%;
            height: r(239);
            padding: r(24) r(20);
            >.top{
                .left{
                    width: r(140);
                    height: r(20);
                    background: url(../img/star.png);
                    background-size: r(140) r(20);
                }
                
                .right{
                    font-size: r(20);
                    color: #999999;
                }
            }
            .middle{
                margin-bottom: r(25);
                p{
                    font-size: r(26);
                    color: #333333;
                    letter-spacing: r(3);
                }
            }
            .foot{
                p{
                    font-size: r(24);
                    color: #cccccc;
                }
            }
        }
        .c2{
            height: r(204);
        }
        .last{
            width: 100%;
            height: r(106);
            padding: r(20);
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
            a{
                float: left;
                display: inline-block;
                width: r(290);
                height: r(65);
                line-height: r(65);
                border: 1px solid #d1d1d1;
                border-radius: r(6);
                font-size: r(26);
                color: #999999;
                vertical-align: middle;
                img{
                    width: r(32);
                    height: r(32);
                    vertical-align: middle;
                    margin-left: r(99);
                    margin-right: r(15);
                }
            }
            a:last-child{
                float: right;
            }
        }
        .hr1{
            width: 100%;
            height: r(71);
            background: #f3f4f6;
        }
    }
}